<template>
  <div class="tree_main">
    <el-input v-model="filterText" style="width: 210px;margin-left:15px;" placeholder="请输入" />
    <el-tree
      style="max-width: 600px"
      class="tree_css"
      ref="treeRef"
      :data="newTreeList"
      node-key="id"
      highlight-current
      draggable
      :props="defaultProps"
      :filter-node-method="filterNode"
      @check-change="handleCheckClick"
      @node-click="handleNodeClick"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
    >
      <template #default="{ node }">
        <el-tooltip class="box-item" effect="dark" :content="node.label" placement="top-start">
          <span class="custom-tree-node-label common-text-ellipsis"> {{ node.label }}</span>
        </el-tooltip>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits, onMounted } from 'vue'
import { apiGetDeptTree, apiAlterParent } from '@/api/user'
import { ElTree } from 'element-plus'
import { useMessage } from '@/hooks/message'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { AllowDropType, NodeDropType } from 'element-plus/es/components/tree/src/tree.type'

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log('drag start', node)
}
const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('正在拖的节点:', dropNode.label)
}
const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
  console.log('tree drag end:', dropNode && dropNode.label, dropType)
}
const handleDrop = async (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
  console.log('最重要的:', draggingNode, dropNode, dropType, ev)
  let par = {
    orgId: draggingNode.data.value,
    parentOrgId: dropNode.data.value,
  }
  apiAlterParent(par)
  const { data } = await apiAlterParent()
  console.log(data)
  if (data.success) {
    useMessage().success(data.message)
    // getTreeList()
  }
}

const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === 'Level two 3-1') {
    return type !== 'inner'
  } else {
    return true
  }
}
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes('Level three 3-1-1')
}

const emits = defineEmits(['nodeClick'])
const props = defineProps({
  draggable: {
    type: Boolean,
    default: true,
  },
  treeListObj: {
    type: [Object, null],
    default: null,
  },
})
interface Tree {
  [key: string]: any
}

const filterText = ref('')
const newTreeList = ref([])
const treeRef = ref<InstanceType<typeof ElTree>>()

// const defaultProps = {
//   children:'subNodes',
//     // label: 'payload.orgCname',
//   label: (data) => data.payload.orgCname
// }
const handleCheckClick = (data, checked) => {
  // let removalList = treeRef.value!.getCheckedKeys()
  // let tempSelectList = [...removalList]
  // console.log(tempSelectList,'tempSelectList')
  // emits('treeChange', tempSelectList)
}
//点击某一节点时触发方法
const handleNodeClick = (data) => {
  console.log(data, 'data')
  emits('nodeClick', data)
}
// const filterNode(value, data) {
//   if (!value) return true
//   return data.label.includes(value)
// },

const defaultProps = ref({
  children: 'children',
  label: 'label',
})
const transformData = (node) => {
  console.log(node, 'nodenodenode')
  if (!node) return []
  const newNode = {
    value: node.nodeNo,
    label: node.nodeLabel,
    orgEname: node.payload ? node.payload.orgEname : '',
    children: [],
  }
  if (node.subNodes && node.subNodes.length > 0) {
    newNode.children = node.subNodes.map((subNode) => transformData(subNode))
  } else {
    delete newNode.children // 删除空的 children 属性
  }
  return newNode
}
// const getTreeList = async() => {
//   console.log('调用了')
//     const {data} = await apiGetDeptTree()
//     if(data.success){
//         // dataList.value = data.data.subNodes
//         treeList.value = [transformData(data.data)];
//     }
// }

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
watch(
  props.treeListObj,
  (val) => {
    console.log(props.treeListObj, '监听props')
    if (!val) return
    newTreeList.value = [transformData(props.treeListObj)]
  },
  { deep: true }
)

const filterNode = (value: string, data: Tree) => {
  console.log(data, 'data123456')
  if (!value) return true
  return data.label.includes(value)
}
onMounted(() => {
  console.log(props, '首次加载组织树')
  newTreeList.value = [transformData(props.treeListObj)]
  console.log(newTreeList.value, '查看数据')
})
</script>
<style lang="less" scoped>
.tree_main {
  .tree_css {
    margin-top: 15px;
  }
}
</style>
